<template>
  <uni-nav-bar title="订单详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" v-if="hexiaoInfo">
    <view class="space-between list">
      <image :src="hexiaoInfo.image" mode=""></image>
      <view class="direction-start" style="height:153rpx;justify-content:space-around;width:76%;">
        <view>{{hexiaoInfo.name}}</view>
        <view class="center" style="color:#5097FB;">
			蓝宝石<text style="font-size: 38rpx;margin-left: 10rpx;">{{hexiaoInfo.score}}</text></view>
        <!-- <view style="color:#999;font-size: 26rpx;">库存：{{hexiaoInfo.stock}}</view> -->
      </view>
    </view>
    <view class="space-between top">
      <view>订单编号</view>
      <view>{{hexiaoInfo.order_sn}}</view>
    </view>
    <view class="space-between top">
      <view>提货数量</view>
      <view>x{{hexiaoInfo.nums}}</view>
    </view>
    <view class="space-between top">
      <view>消耗蓝宝石</view>
      <view>{{hexiaoInfo.order_score}}</view>
    </view>
    <view class="space-between top">
      <view>提货方式</view>
      <view>{{hexiaoInfo.delivery_type}}</view>
    </view>
    <view class="space-between top">
      <view>提货时间</view>
      <view>{{hexiaoInfo.updatetime}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref } from 'vue';
  import { getDuihuanLog } from '@/gql/integral';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { showLoading } from '@/utils/prompt';
  const orderID = ref()
  const hexiaoInfo = ref()
  onLoad((pearm) => {
    orderID.value = pearm.id
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getDuihuanLog,
      variables: {
        order_id: Number(orderID.value),
      },
    };
    toPublish(
      'ql/score/getDuihuanLog',
      payload,
      (obj : any) => {
        const { getDuihuanLog } = obj.data;
        hexiaoInfo.value = getDuihuanLog
      },
    );
  }
</script>

<style scoped lang="less">
  .list {
    width: 100%;
    padding: 0rpx 0px 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

    image {
      width: 153rpx;
      height: 153rpx;
      border-radius: 5px;
    }

    .but {
      width: 140rpx;
      height: 52rpx;
      background: #1B91FF;
      border-radius: 5px;
      text-align: center;
      line-height: 52rpx;
      color: #fff;
    }
  }

  .top {
    margin-top: 20rpx;
  }
</style>